<template>
	<scroll-view class="scrView" :scroll-y="true" :lowerThreshold="50" @scrolltolower="scrolltolowerHandle">
		<view class="">
			<u-swiper :list="banner" keyName="i" height="230" circular indicator indicatorMode="line"></u-swiper>
		</view>

		<view class="" v-for="(l, i) in list" :key="i">
			<!-- 使用component动态切换到底该展示哪个组件 -->
			<!-- <component :is="l.type == 1 ? 'RecommendedItem' : 'NotesItem'" :source="l"></component> -->

			<!-- <RecommendedItem v-if="l.type == 1" :source="l"></RecommendedItem> -->
			<!-- <NotesItem v-if="l.type == 3" :source="l"></NotesItem> -->

			<RecommendedItem v-if="l.type == 1" :authorPic="l.r.a.p" :authorName="l.r.a.n" :lvl="l.r.a.lvl" :img="l.r.img"
				:collectUsers="l.r.collect_users" :collectCount="l.r.collect_count_text" :title="l.r.n"></RecommendedItem>
			<NotesItem v-if="l.type == 3" :authorPic="l.note.author.p" :authorName="l.note.author.n" :lvl="l.note.author.lvl"
				:img="l.note.image_u" :collectUsers="l.note.collect_users" :collectCount="l.note.like_count + '人收藏'"
				:title="l.note.title"></NotesItem>
		</view>
		<u-gap height="30" bgColor="#fff"></u-gap>
		<LoadingBar></LoadingBar>
	</scroll-view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		http
	} from '../untils/http.js'
	import RecommendedItem from '../../douguoApp/components/items/RecommendedItem.vue'
	import NotesItem from '../../douguoApp/components/items/NotesItem.vue'
	import LoadingBar from '../../douguoApp/components/LoadingBar.vue'

	const url = 'home/recommended/0/10'

	export default {
		name: "Recommended",
		computed: mapState(['username', 'age']),
		props: ['refresh'],
		data() {
			return {
				banner: [],
				list: [],
				loading: false
			};
		},
		created() {
			console.log('推荐页面出生了');
			this.getDataFromServerData()
		},
		components: {
			RecommendedItem,
			NotesItem,
			LoadingBar
		},
		watch: {
			refresh(newValue) {
				console.log('recommend 监听到refresh变化', newValue);
			}
		},
		methods: {
			getDataFromServerData(cb) {
				console.log('重新请求数据');
				let timeStamp = new Date().getTime()
				http(url + '?timestamp=' + timeStamp).then((res) => {
					this.banner = res.result.banner
					this.list = res.result.list
					cb && this.$nextTick(cb)
				})
			},
			getRecommendFromSerever() {
				this.loading = true
				let url = 'home/recommended/' + this.list.length + '/20'

				// 第一次网络请求，需要请求topics
				// 后续加载不需要请求
				http(url).then(res => {

					if (this.list && res.result.list) {
						this.list = [...this.list, ...res.result.list]
					}
					console.log(this.list);

					this.$nextTick(() => {
						this.loading = false
					})
				})
			},
			scrolltolowerHandle() {

				if (!this.loading) {
					console.log('滑到底部');
					this.getRecommendFromSerever()
				}
			}
		}
	}
</script>

<style lang="scss">
	.scrView {
		position: fixed;
		top: 77px;
		bottom: 50px;
	}
</style>